Skip to content

feat(designer-v2): add node navigation and retain details tabs - #9621

Merged
Riley Evans (rllyy97) merged 10 commits into
mainfrom
rllyy97-designer-node-navigation
Sep 17, 2026
Merged

feat(designer-v2): add node navigation and retain details tabs#9621
Riley Evans (rllyy97) merged 10 commits into
mainfrom
rllyy97-designer-node-navigation

Conversation

@rllyy97

@rllyy97 Riley Evans (rllyy97) commented Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Commit Type

  • feature - New functionality
  • fix - Bug fix
  • refactor - Code restructuring without behavior change
  • perf - Performance improvement
  • docs - Documentation update
  • test - Test-related changes
  • chore - Maintenance/tooling

Risk Level

  • Low - Minor changes, limited scope
  • Medium - Moderate changes, some user impact
  • High - Major changes, significant user/system impact

What & Why

Add Ctrl/Cmd+Down and Ctrl/Cmd+Up node selection only in designer v2, following the existing positive React Flow nodeIndex order without wrapping at endpoints. Normalize scope IDs and mount offscreen targets using the existing keyboard rendering fallback before focusing them without native container scrolling.

Retain the active operation-details tab across v2 node selections, with a first-available fallback and remembered preference. Key v2 panel content by node to isolate editor drafts. Shortcuts work after an ordinary card click, including when the selected node's details panel Close button or tabs have focus.

Legacy navigation and tab-reset behavior are restored. Shared panel behavior defaults to the original behavior; only v2 explicitly opts into the new focus ordering, tab fallback, and node-keyed content. Real legacy ScopeCardNode and v2 NodeDetailsPanel tests address the reported zero-coverage files without production changes.

Impact of Change

Test Plan

  • Unit tests added/updated
  • E2E tests added/updated
  • Manual testing completed
  • Tested in: Local production and deployed standalone / and /v2, Chromium, Ctrl and Cmd/Meta.

Local verification:

  • V2-only product correction c5631714b: 233 targeted unit tests, 12/12 production-browser tests with zero retries, and 9/9 production build tasks, including declarations.
  • Legacy ScopeCardNode.tsx: 38 tests; 134/134 lines (100%), 26/26 functions, 111/112 branches (99.1%).
  • Snapshot correction 26db21c17: two expected default-false props; 31 related panel tests passed.
  • V2 nodeDetailsPanel.tsx correction e127a8007: 24 real component tests; 89/89 lines (100%), 24/25 functions (96%), 54/56 branches (96.42%). Combined component/hook/navigation run: 107 tests across four suites passed; zero new-test TypeScript diagnostics. No exclusions or threshold changes.
  • Browser cases verify natural-click navigation without programmatic focus, legacy no-navigation/tab reset, v2 retention/fallback, nested scopes, endpoints, editing protections, genuine offscreen mount/focus/visibility, and zero native scroll.
  • Four live natural-click flows on product revision c5631714b verify both routes with Ctrl/Meta. Subsequent commits are test-only. Biome and commit hooks passed.

Remote status verified on e127a80075eba483a544a345542c826551abae22:

  • Coverage gate passed: 35123442928. Both new component suites and the corrected panel snapshot pass remotely. Exact percentages above are local measurements; remote reporting retains nonblocking partial-coverage warnings for other files.
  • Unit tests passed on Node 20/22/24: 35123442934. All 26 VS Code E2E jobs, CodeQL, preview build/checks, and PR validation passed.
  • Preview bot confirms the exact current head deployed: https://salmon-glacier-0725e8f10-pr9621.centralus.5.azurestaticapps.net
  • Not fully green: Playwright shard 3 fails the consumption template case at e2e/templates/createWorkflowPanel.spec.ts:45. Update-button assertions time out; its rendered modal is marked aria-hidden=true. This intermittent failure also reproduces locally, but no connection to navigation changes is established. Template production paths are unchanged; no speculative product fix, longer timeout, or weakened assertion was retained. The same template suite passed on the preceding head.

Contributors

Riley Evans (@rllyy97) with GitHub Copilot.

Screenshots/Videos

Historical captures from the earlier focus-order correction (0c4ba300a). They illustrate Settings retention, not proof of the current v2-only scope or current-head CI. Fresh behavior is covered by the production-browser and live checks above.

Settings retained while switching between a scope and an action

Switch selected with Settings active and canvas focus

HTTP selected with Ctrl+Up while retaining Settings and canvas focus

@rllyy97
feat(designer): add node navigation and retain details tabs
742b95e 
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot AI balanced review requested due to automatic review settings September 15, 2026 15:05
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 15:05 — with GitHub Actions Active
@rllyy97 Riley Evans (rllyy97) added risk:medium Medium risk change with potential impact ephemeral Request a local-only Standalone PR preview labels Sep 15, 2026
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 15:05 — with GitHub Actions Active
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 15:05 — with GitHub Actions Active
@github-actions

github-actions Bot commented Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

  • Current: feat(designer-v2): add node navigation and retain details tabs
  • Issue: None — uses a valid feat(scope): prefix and is descriptive.
  • Recommendation: No change needed.

✅ Commit Type

  • Exactly one type selected (feat – New functionality), which matches the title prefix.
  • Note: The box is labeled feature rather than the template's feat, but intent is unambiguous. Cosmetic only.

✅ Risk Level

  • Exactly one box selected (Medium) and it matches the risk:medium label and my advised estimate. State-management changes in designer-v2 (panelSlice, workflow selectors) plus modifications to the shared designer-ui panel components correctly land at Medium. The shared changes are gated behind a default-false enableNodeNavigation opt-in, so legacy behavior is preserved — no security/auth or breaking API impact that would push this to High.

✅ What & Why

  • Current: Clear description of the v2-only Ctrl/Cmd navigation, tab retention, node-keyed content, and preserved legacy behavior.
  • Issue: None.
  • Recommendation: No change needed.

✅ Impact of Change

  • All three audiences addressed (Users, Developers, System) with meaningful detail.
  • Recommendation:
    • Users: Already covered (v2 gains navigation/tab retention; v1 unchanged; read-only/monitoring supported).
    • Developers: Already covered (default-false shared opt-in; tests in designer-v2).
    • System: Already covered (no new deps/credentials/schema changes).

✅ Test Plan

  • Unit tests added/updated (panel, panelheader, panelSlice, workflowSelectors, actionCard, NodeNavigation suites) AND E2E tests added (e2e/ephemeral/preview.spec.ts). Manual testing also documented. Exceeds requirements.

✅ Contributors

✅ Screenshots/Videos

  • This is primarily a keyboard/behavior change; screenshots are optional here, but captures illustrating Settings retention are included with an honest caveat about their scope. Good.

Summary Table

Section Status Recommendation
Title ✅ No change needed
Commit Type ✅ Cosmetic: label reads feature vs feat
Risk Level ✅ Medium is correct
What & Why ✅ No change needed
Impact of Change ✅ No change needed
Test Plan ✅ Unit + E2E present
Contributors ✅ Present
Screenshots/Videos ✅ Optional; provided

All checks pass — this PR is compliant with the team template and the declared Medium risk matches the code impact. Good to merge.

Powered by: Copilot CLI (claude-opus-4.8) | Last updated: Wed, 16 Sep 2026 17:11:07 GMT

@github-actions

github-actions Bot commented Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Standalone preview

Preview reconciliation failed. Check the Reconcile Standalone Ephemeral workflow logs; rerun it after resolving the error.

Current PR revision: e127a80075eba483a544a345542c826551abae22.

Local workflows only. Azure sign-in, live Azure resources, and the development-only template proxy are not available. This preview runs PR code; do not enter credentials or sensitive workflow data.

Copilot AI reviewed Sep 15, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Browser checks currently fail because panel focus overrides card focus, stopping traversal, while the offscreen test setup also fails its precondition.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds keyboard-based node traversal and preserves operation-details tab selection across both designer versions.

Changes:

  • Adds Ctrl/Cmd+Up/Down node navigation using React Flow ordering.
  • Preserves preferred details tabs and remounts node-specific panel content.
  • Adds shared unit tests, integration tests, E2E coverage, and documentation.
File summaries
File Description
libs/logic-apps-shared/src/utils/src/lib/helpers/nodeNavigation.ts Implements adjacent-node lookup.
libs/logic-apps-shared/src/utils/src/lib/helpers/index.ts Exports the navigation helper.
libs/logic-apps-shared/src/utils/src/lib/helpers/__test__/nodeNavigation.spec.ts Tests navigation ordering and filtering.
libs/designer/src/lib/ui/NodeNavigation.tsx Adds v1 navigation hotkeys.
libs/designer/src/lib/ui/DesignerReactFlow.tsx Mounts navigation and enables offscreen rendering.
libs/designer/src/lib/ui/CustomNodes/ScopeCardNode.tsx Supports tagged scope focus IDs.
libs/designer/src/lib/ui/__test__/nodeNavigationTestSuite.tsx Provides shared navigation tests.
libs/designer/src/lib/ui/__test__/NodeNavigation.spec.tsx Runs the suite against v1.
libs/designer/src/lib/ui/__test__/keyboardNavigation.spec.tsx Updates keyboard-navigation test context.
libs/designer/src/lib/ui/__test__/DesignerReactFlow.spec.tsx Tests navigation mounting and rendering fallback.
libs/designer/src/lib/core/state/workflow/workflowSelectors.ts Recognizes normalized and canvas node IDs.
libs/designer/src/lib/core/state/panel/panelSlice.ts Retains the selected details tab.
libs/designer-v2/src/lib/ui/NodeNavigation.tsx Adds v2 navigation hotkeys.
libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx Mounts v2 navigation and rendering fallback.
libs/designer-v2/src/lib/ui/CustomNodes/ScopeCardNode.tsx Supports tagged v2 scope focus IDs.
libs/designer-v2/src/lib/ui/__test__/NodeNavigation.spec.tsx Runs the shared suite against v2.
libs/designer-v2/src/lib/ui/__test__/DesignerReactFlow.spec.tsx Tests v2 navigation integration.
libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts Recognizes both scope ID forms.
libs/designer-v2/src/lib/core/state/panel/panelSlice.ts Retains tabs across v2 selection changes.
libs/designer-ui/src/lib/panel/panelcontent.tsx Adds tab fallback and node-keyed content.
e2e/ephemeral/preview.spec.ts Exercises navigation in browser previews.
apps/Standalone/README.md Documents shortcuts and tab retention.
Review details
  • Files reviewed: 22/22 changed files
  • Comments generated: 3
  • Review effort level: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread libs/designer-v2/src/lib/ui/NodeNavigation.tsx
Comment thread libs/designer/src/lib/ui/NodeNavigation.tsx Outdated
Comment thread e2e/ephemeral/preview.spec.ts Outdated
@github-actions

github-actions Bot commented Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

📊 Coverage Check

The following changed files need attention:

⚠️ libs/designer-v2/src/lib/core/state/panel/panelSlice.ts - 61% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/core/state/workflow/workflowSelectors.ts - 28% covered (needs improvement)
⚠️ libs/designer/src/lib/core/state/workflow/workflowSelectors.ts - 27% covered (needs improvement)
⚠️ libs/designer-ui/src/lib/panel/panelcontainer.tsx - 73% covered (needs improvement)
⚠️ libs/designer-ui/src/lib/panel/panelcontent.tsx - 76% covered (needs improvement)
⚠️ libs/designer-v2/src/lib/ui/DesignerReactFlow.tsx - 51% covered (needs improvement)

Please add tests for the uncovered files before merging.

@rllyy97 Riley Evans (rllyy97) mentioned this pull request Sep 15, 2026
Merged
14 tasks
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:11 — with GitHub Actions Active
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:11 — with GitHub Actions Active
@rllyy97
fix(designer): retain canvas focus during node navigation
0c4ba30 
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:27 — with GitHub Actions Active
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:27 — with GitHub Actions Active
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:27 — with GitHub Actions Active
@rllyy97
fix(designer): prevent native scrolling during canvas navigation
bcc7454 
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:31 — with GitHub Actions Active
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 16:31 — with GitHub Actions Active
@rllyy97 Riley Evans (rllyy97) mentioned this pull request Sep 15, 2026
Merged
14 tasks
@rllyy97
test(designer): cover navigation focus and retained panel state
6b76275 
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 18:07 — with GitHub Actions Active
@rllyy97
Riley Evans (rllyy97) deployed to standalone-ephemeral September 15, 2026 18:08 — with GitHub Actions Active
@rllyy97 Riley Evans (rllyy97) mentioned this pull request Sep 15, 2026
Merged
14 tasks
@rllyy97
fix(designer): enable node shortcuts after mouse selection
f0ce806 
Allow navigation from non-editing controls in the selected node's details panel while preserving editor and unrelated-panel scope.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97
fix(designer): scope node navigation to v2 and cover legacy scopes
c563171 
Restore legacy selection and shared panel defaults while keeping navigation and tab retention opt-in for designer v2. Add real legacy ScopeCardNode coverage and browser regressions for v1 isolation.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97 Riley Evans (rllyy97) changed the title feat(designer): add node navigation and retain details tabs feat(designer-v2): add node navigation and retain details tabs Sep 16, 2026
@rllyy97
test(designer-ui): update panel navigation opt-in snapshot
26db21c 
Record the intentional default-false props passed to panel header and content. Preserve legacy behavior and fix the unit suite that blocked coverage.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97
test(designer-v2): cover node details panel behavior
e127a80 
Exercise the real component navigation opt-in, menu actions, title and parameter validation, pinned-panel closing, run resubmission, and child-workflow monitoring. Achieve 100% whole-file line coverage without production changes or exclusions.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@rllyy97
Riley Evans (rllyy97) merged commit 9f29deb into main Sep 17, 2026
58 of 59 checks passed
@rllyy97
Riley Evans (rllyy97) deleted the rllyy97-designer-node-navigation branch September 17, 2026 19:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Balanced
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@ccastrotrejo Carlos Castro Trejo (ccastrotrejo) ccastrotrejo approved these changes

Assignees

No one assigned

Labels

ephemeral Request a local-only Standalone PR preview pr-validated risk:medium Medium risk change with potential impact

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@rllyy97 @ccastrotrejo